const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(10,10,10);

const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('chart').appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

const chartData = [
    {label: '一月', value: 30,color:0x4287f5},
		{label: '二月', value: 40,color:0x42f554},
		{label: '三月', value: 50,color:0xf5e242},
		{label: '四月', value: 60,color:0xf54242},
		{label: '五月', value: 70,color:0xf542a5},
		{label: '六月', value: 80,color:0x42f5f5},
		];
		
function createChart(data) {
    const chartGroup = new THREE.Group();
		const chartWidth =1;
		const chartDepth =1;
		const chartSpace =2;
		
		const axisGeometry = new THREE.BoxGeometry(1, 0.1, 0.1);
		const axisMaterial = new THREE.MeshBasicMaterial({color: 0x333333});
		
		const axisX = new THREE.Mesh(new THREE.BoxGeometry(data.length*chartSpace,0.1,0.1), axisMaterial);
		axisX.position.set((data.length * chartSpace)/2,0,0);
		chartGroup.add(axisX);
		
		const axisY = new THREE.Mesh(new THREE.BoxGeometry(0.1,10,0.1), axisMaterial);
		axisY.position.set(0,5,0);
		chartGroup.add(axisY);
		
		data.forEach((item, index) => {
			const cubeGeometry = new THREE.BoxGeometry(chartWidth, item.value/10, chartDepth);
			const cubeMaterial = new THREE.MeshPhongMaterial({color: item.color,emissive:item.color,emissiveIntensity:0.2});
			const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
			
			cube.position.x = index*chartSpace+chartSpace/2;
			cube.position.y = (item.value/10)/2;
			
			chartGroup.add(cube);
			
			const div = document.createElement('div');
			div.className = 'label';
			div.textContent=item.label;
			div.style.marginTop='-1em';
			const label = new CSS2DObject(div);
			label.position.set(cube.position.x,-0.5,cube.position.z);
			chartGroup.add(label);
		});
		
		return chartGroup;
		};
		
const chart = createChart(chartData);
scene.add(chart);

function animate() {
    requestAnimationFrame(animate);
    controls.update();
		renderer.render(scene, camera);
  };
	
window.addEventListener('resize',()=>{
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
});

animate();

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseMove(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(chart.children);

    if (intersects.length > 0) {
        const object = intersects[0].object;
        object.material.emissiveIntensity = 0.5;
        document.body.style.cursor = 'pointer';
    } else {
        chart.children.forEach(child => {
            if (child.material) {
                child.material.emissiveIntensity = 0.2;
            }
        });
        document.body.style.cursor = 'default';
    }
}

window.addEventListener('mousemove', onMouseMove);

